<template>
  <el-card class="box-card content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="数据情况" name="first">
        <el-row>
          <el-col :span="24">
            <el-card class="box-card" shadow="none">
              <template #header>
                <div class="card-header">
                  <div :span="2" class="salesDataTitle">销售额分析</div>
                  <el-select
                    size="default"
                    class="salesDataSelector"
                    v-model="selectValue"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <div class="picker" v-if="salesDataPicker">
                    <el-date-picker
                      size="default"
                      v-model="salesDataData"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                    />
                  </div>
                </div>
              </template>
              <div ref="echartTable1" id="echartTable1"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="15" class="tableCenter">
          <el-col :span="12">
            <el-card class="box-card" shadow="none">
              <template #header>
                <div class="card-header">
                  <div :span="2" class="salesDataTitle">课程销售额排名(TOP30)</div>
                  <el-select
                    size="default"
                    class="salesDataSelector"
                    v-model="selectValue"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <div class="picker" v-if="salesDataPicker">
                    <el-date-picker
                      size="default"
                      v-model="salesDataData"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                    />
                  </div>
                </div>
              </template>
              <div ref="echartTable2" id="echartTable2"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="box-card" shadow="none">
              <template #header>
                <div class="card-header">
                  <div :span="2" class="salesDataTitle">课程销量排名(TOP30)</div>
                  <el-select
                    size="default"
                    class="salesDataSelector"
                    v-model="selectValue"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <div class="picker" v-if="salesDataPicker">
                    <el-date-picker
                      size="default"
                      v-model="salesDataData"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                    />
                  </div>
                </div>
              </template>
              <div ref="echartTable3" id="echartTable3"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="15" class="tableCenter">
          <el-col :span="12">
            <el-card class="box-card" shadow="none">
              <template #header>
                <div class="card-header">
                  <div :span="2" class="salesDataTitle">销售占比</div>
                  <el-select
                    size="default"
                    class="salesDataSelector"
                    v-model="selectValue"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                  <div class="picker" v-if="salesDataPicker">
                    <el-date-picker
                      size="default"
                      v-model="salesDataData"
                      type="daterange"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
                    />
                  </div>
                </div>
              </template>
              <div ref="echartTable4" id="echartTable4"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="销售额分析" name="second">销售额分析</el-tab-pane>
      <el-tab-pane label="销售额月分析" name="third">销售额月分析</el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import echart from "echarts";
//底部饼图

const courseSalesdatax4 = [
  { value: 2556, name: "教程" },
  { value: 200, name: "物品" },
  { value: 100, name: "费用" },
];

let salesDataChart4 = null;
onMounted(() => {
  salesDataChart4 = echart.init(document.getElementById("echartTable4"));
  var echartOptions4 = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        type: "pie",
        radius: "40%",
        data: courseSalesdatax4,
        color: ["#89c3eb", "#9d5b8b", "#8b968d"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  salesDataChart4.setOption(echartOptions4);
});

//左边柱状图
const courseSalesdatax1 = ["编程A班", "葡萄籽", "篮班"];
const courseSalesdatay1 = [300, 200, 100];

let salesDataChart2 = null;
onMounted(() => {
  salesDataChart2 = echart.init(document.getElementById("echartTable2"));
  var echartOptions2 = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: courseSalesdatax1,
    },
    series: [
      {
        type: "bar",
        data: courseSalesdatay1,
        itemStyle: {
          color: "#a2d7dd",
        },
      },
    ],
  };
  salesDataChart2.setOption(echartOptions2);
});

//右边柱状图
const courseSalesdatax3 = ["篮球班", "编程A班", "葡萄籽"];
const courseSalesdatay3 = [1000, 896, 660];
let salesDataChart3 = null;
onMounted(() => {
  salesDataChart3 = echart.init(document.getElementById("echartTable3"));
  var echartOptions3 = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: courseSalesdatax3,
    },
    series: [
      {
        type: "bar",
        data: courseSalesdatay3,
        itemStyle: {
          color: "#e198b4",
        },
      },
    ],
  };
  salesDataChart3.setOption(echartOptions3);
});

//柱状图
const options = ref(["近一周", "近15天", "近30天", "自定义"]);
const selectValue = ref("近15天");
const activeName = ref("first");
//是否显示日期选择
const salesDataPicker = ref(false);
//自定义事件
const salesDataData = ref("");
//销售额时间
var endDate = new Date();
var dataDate = [];
for (var i = 0; i < 30; i++) {
  var date =
    endDate.getFullYear() +
    "-" +
    (endDate.getMonth() + 1).toString().padStart(2, "0") +
    "-" +
    endDate.getDate().toString().padStart(2, "0");
  dataDate.push(date);
  endDate.setDate(endDate.getDate() - 1); // 递减日期
}
//销售额费用
var dataMoney = [];
for (var i = 0; i < 30; i++) {
  var sale = Math.floor(Math.random() * 5001);
  dataMoney.push(sale);
}
//销售额物品
var dataProduct = [];
for (var i = 0; i < 30; i++) {
  var sale = Math.floor(Math.random() * 5001);
  dataProduct.push(sale);
}
//销售额教程
var dataCourse = [];
for (var i = 0; i < 30; i++) {
  var sale = Math.floor(Math.random() * 250);
  dataCourse.push(sale);
}
//初始化销售额柱状图
let salesDataChart = null;
onMounted(() => {
  salesDataChart = echart.init(document.getElementById("echartTable1"));
  var echartOptions = {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: dataDate.slice(15),
    },
    yAxis: {
      type: "value",
    },
    legend: {
      data: ["费用", "物品", "教程"],
      left: 0,
      orient: "vertical",
    },
    series: [
      {
        name: "费用",
        type: "bar",
        data: dataMoney.slice(15),
        itemStyle: {
          color: "#89c3eb",
        },
      },
      {
        name: "物品",
        type: "bar",
        data: dataProduct.slice(15),
        itemStyle: {
          color: "#9d5b8b",
        },
      },
      {
        name: "教程",
        type: "bar",
        data: dataCourse.slice(15),
        itemStyle: {
          color: "#8b968d",
        },
      },
    ],
  };
  salesDataChart.setOption(echartOptions);
});
//顶部tab切换
const handleClick = (tab, event) => {
  console.log(tab, event);
};
//选择不同时间显示不同数据
let salesDataTime = 15;
watch(selectValue, () => {
  console.log(selectValue);
  salesDataPicker.value = false;
  if (selectValue.value == "近一周") {
    salesDataTime = 23;
  } else if (selectValue.value == "近15天") {
    salesDataTime = 15;
  } else if (selectValue.value == "近30天") {
    salesDataTime = 0;
  } else {
    salesDataPicker.value = true;
  }
  console.log(dataDate.slice(salesDataTime));
  salesDataChart.setOption({
    xAxis: {
      data: dataDate.slice(salesDataTime),
    },
    series: [
      {
        name: "费用",
        type: "bar",
        data: dataMoney.slice(salesDataTime),
      },
      {
        name: "物品",
        type: "bar",
        data: dataProduct.slice(salesDataTime),
      },
      {
        name: "教程",
        type: "bar",
        data: dataCourse.slice(salesDataTime),
      },
    ],
  });
});
</script>

<style lang="scss" scoped>
.tableCenter {
  margin-top: 15px;
}
.picker {
  width: 400px !important;
  margin-left: 15px;
  padding-bottom: 5px;
  box-sizing: border-box;
}
.card-header {
  display: flex;
  align-items: center;
}
#echartTable1 {
  width: 100%;
  height: 300px;
}
#echartTable2 {
  width: 100%;
  height: 500px;
}
#echartTable3 {
  width: 100%;
  height: 500px;
}
#echartTable4 {
  width: 100%;
  height: 405px;
}
.salesDataSelector {
  margin-left: 10px;
  width: 130px;
}
.content {
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  margin: 10px 20px;
}
.el-card {
  margin-bottom: 0;
  border: 0;
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
}
.salesDataTitle {
  font-size: 16px;
  font-weight: 400;
}
</style>
